<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>百度一下，你就知道</title>
    <link rel="shortcut icon" type="image/x-icon" href="./img/baidu_logo.png"/>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        #top {
            width: 100%;
            height: 35px;
            padding-top: 1px;
        }
        .nav-font {
            color: #333;
            font-size: 13px;
            font-weight: bold;
            line-height: 24px;
            margin-left: 20px;
        }
        .nav-font-left {
            color: #333;
            font-size: 13px;
            line-height: 24px;
            margin-left: 20px;
        }
        #nav-left {
            width: auto;
            float: left;
            margin-top: 4px;
        }

        #nav-right {
            width: auto;
            float: right;
            margin-top: 4px;
        }
        .nav-left-a {
            text-decoration: none;
        }
        .nav-right-a {
            text-decoration: underline;
        }
        #other-product {
            color: #ffffff;
            padding: 4px 10px 6px 10px;
            background-color: #3388FF;
            text-decoration: none;
            margin-left: 20px;
        }
        #content {
            width: 100%;
            height: 500px;
            padding-top: 1px;

        }
        #search-image {
            width: 640px;
            height: 180px;
            margin-top: 110px;
            margin-left: 30%;
        }

        #search {
            width: 640px;
            height: 40px;
            margin-left: 30%;
            margin-top: 40px;
            border: gray solid 1px;
        }
        #search input {
            margin-top: 5px;
            margin-left: 5px;
            width: 536px;
            height: 25px;
            border-style : none;
        }
        #search img {
            margin-top: 7px;
            margin-left: 5px;
        }
        #search button {
            width: 60px;
            height: 25px;
            background-color: #3388FF;
            color: #ffffff;
            border-style : none;
        }
        #footer {
            width: 100%;
            height: 248px;
            font-size: 12px;
            margin-top: 162px;
            padding-top: 1px;
            color: gray;
        }
        #footer a {
            color: gray;
        }
        #related-link {
            width: 100%;
            text-align:center;
            margin-top: 200px;
        }
        #recordcode {
            text-decoration: none;
            text-align:center;
            margin-bottom: 10px;
        }

    </style>
    <script>

    </script>
</head>
<body>
    <div id="top">
        <div id="nav-left">
            <a class="nav-font-left nav-left-a" href="#">杭州：</a>
            <a class="nav-font-left nav-left-a" href="#">天气</a>
            <a class="nav-font-left nav-left-a" href="#"><span>优</span><span>&nbsp;&nbsp;&nbsp;28</span></a>
            <span>|</span>
            <a class="nav-font-left" href="#">换肤</a>
            <a class="nav-font-left" href="#">消息</a>
            <a class="nav-font-left" href="#">显示频道</a>
        </div>
        <div id="nav-right">
            <a class="nav-font nav-right-a" href="#" >新闻</a>
            <a class="nav-font nav-right-a" href="#" >hao123</a>
            <a class="nav-font nav-right-a" href="#" >地图</a>
            <a class="nav-font nav-right-a" href="#" >视频</a>
            <a class="nav-font nav-right-a" href="#" >贴吧</a>
            <a class="nav-font nav-right-a" href="#" >学术</a>
            <a class="nav-font nav-right-a" href="#" >登录</a>
            <a class="nav-font nav-right-a" href="#" >设置</a>
            <a id="other-product" href="#">更多产品</a>
        </div>
    </div>
    <hr/>
    <div id="content">
        <div id="search-image">
            <a><img src="./img/baidu.png" /></a>
        </div>
        <div id="search">
            <input type="text" />
            <img src="./img/camare.png" />
            <button>百度一下</button>
        </div>
    </div>
    <div id="footer">
        <div id="related-link">
            <a href="#" >设为首页</a>
            <span>@2018 Baidu</span>
            <a href="#" >使用百度前必读</a>
            <a href="#" >意见反馈</a>
            <span>京ICP证030173号</span>
        </div>
        <div id="recordcode">
            <a href="#"><img src="./img/record.png"/>京公网安备11000002000001号</a>
        </div>
    </div>

</body>
</html>